<template>
	<view class="addEditForm">
		<view class="data-form">
			<view class="data-form-item flex-ac bgfff">
				<text class="data-form-label f30 require">标题</text>
				<view class="data-form-input">
					<input type="text" :disabled="optionDisabled" v-model="dataForm.title"
						:placeholder="optionDisabled?'-':'请输入'" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="title-view">
				<!-- 居中标题 -->
				<view class="gui-flex gui-rows gui-nowrap gui-justify-content-center gui-align-items-center">
					<text class="gui-color-gray gui-icons small-text">&#xe69b;</text>
					<text class="gui-primary-color gui-h6 title1-margin gui-title-text">抽卷规则</text>
					<text class="gui-color-gray gui-icons small-text">&#xe69b;</text>
				</view>
			</view>
			<view class="bgfff from-item" v-for="(item,index) in dataForm.params.planExams" :key="index"
				:class="{'isOne':index!=0}">
				<view class="del-drom flex-ac-je" v-if="index!=0">
					<text class="gui-icons" @tap="delForm(index)">&#xe636;</text>
				</view>
				<view class="data-form-item flex-ac">
					<text class="data-form-label f30 require">课程</text>
					<view class="data-form-input">
						<cpdd-select v-model="item.curriculumId" :disabled="optionDisabled" :list="classList"
							keyname="curriculumName" valname="curriculumId"
							@change="changeClassType($event,index,item)"></cpdd-select>
					</view>
				</view>
				<view class="data-form-item flex-ac">
					<text class="data-form-label f30 require">章节</text>
					<view class="data-form-input">
						<cpdd-select v-model="item.chapterId" :disabled="optionDisabled||!chapterList[index].length"
							:list="chapterList[index]" keyname="name" valname="id"></cpdd-select>
					</view>
				</view>
				<view class="data-form-item flex-ac">
					<text class="data-form-label f30 require">题型</text>
					<view class="data-form-input">
						<cpdd-select v-model="item.topicType" :disabled="optionDisabled" :list="selectList"
							keyname="name" valname="val"></cpdd-select>
					</view>
				</view>
				<view class="data-form-item flex-ac">
					<text class="data-form-label f30 require">题量</text>
					<view class="data-form-input">
						<input type="text" :disabled="optionDisabled" v-model="item.topicCount"
							:placeholder="optionDisabled?'-':'请输入'" placeholder-class="plStyle" />
					</view>
				</view>
				<view class="data-form-item flex-ac">
					<text class="data-form-label f30 require">分值</text>
					<view class="data-form-input">
						<input type="text" :disabled="optionDisabled" v-model="item.score"
							:placeholder="optionDisabled?'-':'请输入'" placeholder-class="plStyle" />
					</view>
				</view>
			</view>
		</view>
		<view class="saveBtn add-btn" @tap="addForm">继续添加</view>
		<view class="right-area-footer2 flex-ac bgfff" v-if="!optionDisabled">
			<view class="saveBtn cancleBtn" @tap="handleCancle">取消</view>
			<view class="saveBtn" @tap="handleSubmit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				did: '', //培训计划id
				dataForm: { //单项表单
					planId: '',
					title: '',
					params: {
						planExams: [{
							curriculumId: '',
							chapterId: '',
							topicType: "",
							topicCount: '',
							score: ''
						}]
					}
				},
				optionDisabled: false,
				selectList: [{
					val: 'Single',
					name: '单选'
				}, {
					val: 'Multi',
					name: '多选'
				}, {
					val: 'Judge',
					name: '判断'
				}],
				classList: [], //培训下的课程列表
				chapterList: [
					[]
				], //课程章节


			}
		},
		onLoad(options) {
			console.log('options', options);
			this.did = options.id || ''
			this.dataForm.planId = this.did
			this.optionDisabled = options.op == 'look' ? true : false
			this.loadClass()
		},
		methods: {
			loadClass() {
				this.$http.get(`/training/plan/${this.did}`).then(res => {
					if (res.code == 200) {
						let result = res.data
						console.log('result', result);
						this.classList = result.params.curriculums
					}
				})
			},
			delForm(idx) {
				this.$u.showModal('', '确认删除当前编辑的题目吗？', (res) => {
					if (res) {
						this.dataForm.params.planExams.splice(idx, 1)
						this.chapterList.splice(idx, 1)
					}
				})
			},
			addForm() {
				this.dataForm.params.planExams.push({
					curriculumId: '',
					chapterId: '',
					topicType: "",
					topicCount: '',
					score: ''
				})
				this.chapterList.push([])
			},
			changeClassType(e, idx, item) {
				console.log('选择课程', e, idx, item);
				item.curriculumId = e
				this.getChapter(e, idx, item)
			},
			getChapter(id, idx, item) {
				this.$http.get(`/training/chapter/list`, {
					pageNum: 1,
					pageSize: 999999,
					curriculumId: id
				}).then(res => {
					if (res.code == 200) {
						let result = res.rows
						console.log('result', result);
						this.chapterList.splice(idx, 1, result)
						item.chapterId = ''
						console.log('item', item);
					}
				})
			},
			handleCancle() {
				this.$u.back()
			},
			handleSubmit() {
				console.log('dataForm',this.dataForm);
				if(!this.dataForm.planId) return this.$u.msg("未获取到培训！")
				if(!this.dataForm.title) return this.$u.msg("请输入标题！")
				let listData = this.dataForm.params.planExams
				for (let i = 0; i < listData.length; i++) {
					if (!listData[i].curriculumId) return this.$u.msg("请选择第" + (i + 1) + "卷子的课程！")
					if (!listData[i].chapterId) return this.$u.msg("请选择第" + (i + 1) + "卷子的章节！");
					if (!listData[i].topicType) return this.$u.msg("请选择第" + (i + 1) + "卷子的题型！");
					if (!listData[i].topicCount) return this.$u.msg("请选择第" + (i + 1) + "卷子的题量！");
					if (!listData[i].score) return this.$u.msg("请选择第" + (i + 1) + "卷子的分值！");
				}
				this.realSumbit(this.dataForm);
			},
			realSumbit(formData) {
				uni.showLoading({
					title: '正在提交'
				})
				this.$http.post('/training/exam', formData).then(res => {
					if (res.code == 200) {
						uni.$emit('reFlashList')
						this.$u.msg('抽卷成功!')
						this.$u.back(1, 1000)
					}else{
						
					}
				}).catch(err=>{
					this.$u.showModal('',err.msg,()=>{
						
					})
				})
			},
		}
	}
</script>

<style lang="less">
	.data-form {
		position: relative;
		margin-bottom: 10rpx;

		.from-item {
			margin-top: 20rpx;
			position: relative;

			.del-drom {
				position: absolute;
				right: 20rpx;
				top: 10rpx;
				font-size: 38rpx;
				width: 100rpx;
				color: #ff0000;
			}
		}

		.isOne {
			padding-top: 30rpx;
		}


	}

	.add-btn {
		margin: 30rpx 160rpx 30rpx 160rpx;
		height: 70rpx;
		font-size: 28rpx;
	}

	.answer-item {
		width: 60rpx;
		height: 60rpx;
		border-radius: 4rpx;
		background: #ccc;
		margin-right: 30rpx;
	}

	.answer-check {
		background: #2979ff;
		transition: all .5s;
	}
</style>